fix(web): condense inspector header and surface call picker on mobile#32364
Merged
Conversation
The LLM Context Inspector was unusable on phone viewports: - Header crammed Back / title / Export / call count on one row, so 'LLM Context Inspector' wrapped to two lines inside ~120px and the ScopeSubtitle truncated vertically. - The call-selection rail was '<aside className="hidden ... md:block">' with no mobile fallback, leaving users unable to pick a call. - TabBar had no overflow handling, so the trailing Skills/Memory tabs were clipped past the right edge. Fixes: - Header wraps onto multiple rows below 'md:' via 'flex-wrap' + CSS 'order-*': Back + Export stay in row 1, the title block drops to its own full-width row so it never squeezes. Desktop layout is unchanged. Title sizes down from text-title-medium to text-body-large-bold on mobile. - New 'MobileCallSelector' wraps CallRail in a BottomSheet.Root with a full-width pill trigger above the TabBar (mounted via 'md:hidden'). Trigger reads 'Call N of M' so the current selection stays visible even when the sheet is closed. - 'CallRail' now accepts an 'onSelect?' callback so the mobile sheet can close itself after a row is tapped — URL '?callId' changes don't reset the sheet's local 'open' state. - TabBar gains 'overflow-x-auto' + per-button 'shrink-0 whitespace-nowrap' so all seven tabs are reachable via horizontal scroll on narrow screens; added role=tablist/tab + aria-selected while in there. Tests: new 'mobile-call-selector.test.tsx' covers trigger label shapes (selected, no selection, stale id) and the accessible name. 'inspect-page.test.tsx' picks up an assertion that the mobile pill mounts alongside the desktop aside.
dvargasfuertes
approved these changes
May 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The LLM Context Inspector was unusable on phone viewports — the header text wrapped awkwardly and there was no way to switch between LLM calls because the desktop
<aside>rail was hidden with no fallback. Tabs past Compaction were also clipped past the right edge.This PR makes the inspector responsive while keeping the desktop layout pixel-identical:
flex-wrap+ CSSorder-*: Back + Export stay on row 1, the title block drops to its own full-width row so it never squeezes. Title sizes down fromtext-title-mediumtotext-body-large-boldbelowmd:. Desktop layout is unchanged.MobileCallSelectorwrapsCallRailinBottomSheet.Rootwith a full-width pill trigger above theTabBar(mounted viamd:hidden). Trigger readsCall N of Mso the current selection stays visible even when the sheet is closed, andCallRailgained anonSelect?prop so the sheet closes itself once the user picks a row (URL?callIdchanges alone don't reset the sheet's localopenstate).overflow-x-autoon the row +shrink-0 whitespace-nowrapper button means all seven tabs are reachable via horizontal scroll on mobile. Addedrole=tablist/role=tab/aria-selectedwhile in there.Before / After
The mobile screenshot showed:
After this PR, on
<md:Tests
mobile-call-selector.test.tsx(new) — trigger label shapes for selected / no-selection / stale-id cases + accessible name.inspect-page.test.tsx— added an assertion that the mobile pill mounts alongside the desktop aside in the loaded state.AGENTS.md compliance
apps/web/docs/CAPACITOR.md: theBottomSheetprimitive already handlessafe-area-inset-bottom(pb-[calc(16px+var(--safe-area-inset-bottom,...))]), so the iOS Capacitor shell renders the sheet correctly without extra inset code from this PR.apps/web/docs/CONVENTIONS.md/ frontend-architecture rule feat: initialize Next.js app in /web directory #1): the only new state is the sheet's localopenboolean. Selection state remains URL-driven (?callId).